<template>
    <div class="article-publish">
        <button @click="updateInfo()" class="btn btn-primary publish-btn">保存</button>
        
        <h1 class="title">个人资料修改</h1>
        <div class="form-container">
            <div class="form-group">
                <label for="title">用户名:</label>
                <input type="text" id="nickName" v-model="adminInfo.nickName" class="form-control" placeholder="请输入" />
            </div>
            <div class="form-group">
                <label for="author">性别:</label>
                <input type="text" id="gender" v-model="adminInfo.gender" class="form-control" placeholder="请输入" />
            </div>
            <div class="form-group">
                <label for="author">城市:</label>
                <input type="text" id="author" v-model="adminInfo.city" class="form-control" placeholder="请输入" />
            </div>
            <div class="form-group">
                <label for="author">年龄:</label>
                <input type="text" id="author" v-model="adminInfo.age" class="form-control" placeholder="请输入" />
            </div>
            <label for="author">头像:</label>
            <el-upload
                class="upload-demo"
                drag
                action="none"
                auto-upload
                :http-request="uploadFile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <img
                    v-if="this.adminInfo.avatarUrl"
                    :src="'api/' + this.adminInfo.avatarUrl"
                    style="width: 100%; height: 100%"
                />
                <div else>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处，或<em>点击上传</em>
                    </div>
                </div>
            </el-upload>
        </div>
    </div>
</template>

<script>
    import api from "@/utils/api";
    import { Message } from "element-ui";
export default {
    name: "ArticlePublish",
    
    data() {
        return {
            adminInfo: {
                userId: "",
                avatarUrl: "",
                gender: "",
                city: "",
                nickName: "",
                age: "",
            },
        };
    },
    computed: { 
        headers() { 
            const TOKEN = localStorage.getItem('token') || ''; 
            return { token: TOKEN }; 
        } 
    },
    mounted() {
        if (this.$route.query !== null) {
            this.adminInfo.userId = this.$route.query.userId;
            this.adminInfo.avatarUrl = this.$route.query.avatarUrl;
            this.adminInfo.city = this.$route.query.city;
            this.adminInfo.nickName = this.$route.query.nickName;
            this.adminInfo.age = this.$route.query.age;
            this.adminInfo.gender = this.$route.query.gender;
        }
    },
    methods: {
        triggerFileInput() {
            this.$refs.fileInput.click();
        },
        uploadFile(file) {
            console.log(file);
            let form = { file: file.file };
            api.fileUpload(form).then((data) => {
                Message.success("上传成功！")
                this.adminInfo.avatarUrl = data.data;
            });
        },
        async updateInfo() {
            console.log("update updateInfo ", this.adminInfo);
            api.updateUserInfo(this.adminInfo).then((data) => {
                console.log(data);
                if (data.code == 200) {
                    Message.success("更新成功");
                    this.$store.dispatch("Launch", data);
                    this.$router.push("/home");
                }
            });
        }
    }
};
</script>

<style>
.article-publish {
    height: 100%;
    width: 100%;
    padding: 20px;
    background-color: #f9f9f9;
    position: relative;
}

.publish-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.publish-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-upload {
    margin-left: 10px;
    padding: 8px 12px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.btn-upload:hover {
    background-color: #218838;
}

.title {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.form-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 15px;
}

label {
    width: 120px;
    font-weight: bold;
    color: #555;
    margin-top: 8px;
}

.form-control {
    flex: 1;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease-in-out;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.content-box {
    height: 200px;
    min-height: 150px;
    max-height: 300px;
    width: 100%;
    overflow-y: auto;
    resize: vertical;
}

.editor-container {
    flex: 1;
    width: 100%;
}

.word-count {
    text-align: right;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

.image-preview {
    margin-left: 10px;
    margin-bottom: 15px;
}

.image-preview img {
    max-width: 300px;
    border: 1px solid #ddd;
}
</style>
